<template>
    <div class="order-list-container">
        <!-- 骨架屏区域开始 -->
        <el-skeleton animated :loading="isShowSkeleton">
            <template #template>
                <div style="background-color: #fff;margin-bottom: 10px;padding: 10px 0;">
                    <el-skeleton-item style="height: 60px;"/>
                </div>
                <div class="orders-wrap">
                    <div class="tabs-wrap">
                        <el-skeleton-item class="tabs-skeleton-item" v-for="(item, index) in 5" :key="index"/>
                    </div>

                    <div class="order-content-wrap" v-for="(item, index) in 5" :key="index">
                        <div class="order-item-title">
                            <el-skeleton-item class="order-skeleton-item"/>
                        </div>
                        <div class="order-item-content">
                            <div class="goods-info-skeleton">
                                <el-skeleton-item variant="image" style="width: 80px; height: 80px;" />
                                <div style="display: flex;flex-direction: column;padding-left: 10px;">
                                    <el-skeleton-item style="width: 250px; height: 40px;"/>
                                    <el-skeleton-item style="width: 250px; height: 25px;margin-top: 10px;"/>
                                </div>
                            </div>
                            <div v-for="(item, index) in 5" :key="index">
                                <el-skeleton-item style="width: 60px; height: 25px;"/>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </el-skeleton>
        <!-- 骨架屏区域结束 -->

        <!-- 订单搜索区域开始 -->
        <div class="order-search-wrap">
            <div class="title">
                <i class="iconfont icon-dingdan"></i>
                <span class="txt">我的订单</span>
            </div>
            <div class="search-wrap">
                <el-input
                    v-model="params.goods_name"
                    style="width: 600px"
                    size="large"
                    placeholder="请输入商品名称"
                    :prefix-icon="Search"
                    :clearable="true"
                    />
                
                <el-button class="search-btn" type="default" size="large" @click="handlerSearchOrder">搜索</el-button>
            </div>
        </div>
        <!-- 订单搜索区域结束 -->

        <!-- 订单内容区域开始 -->
        <el-tabs type="border-card" @tab-change="handleTabChange">
            <el-tab-pane :label="item.title" v-for="(item, index) in orderStatus" :key="index">
                <template v-if="orderList.length > 0">
                    <OrderItem 
                        v-for="order in orderList"
                        :key="item.oid"
                        :order="order"
                        :status_items="orderStatusItems"
                        :tabsStatus="params.status"
                        @deleteOrderList="deleteOrderList"
                        @updateOrderStatus="updateOrderStatus"
                        @updateOrderItemStatus="updateOrderItemStatus"/>
                </template>

                <template v-if="!isShowSkeleton && orderList.length == 0">
                    <div>
                        <TridentEmpty />
                    </div>
                </template>
            </el-tab-pane>
        </el-tabs>
        <!-- 订单内容区域结束 -->

        <!-- 分页区域开始 -->
        <div class="page-wrap" v-if="orderList.length > 0">
            <el-pagination 
                background 
                layout="prev, pager, next" 
                :total="total"
                :page-size="params.page_size"
                :current-page="params.page"
                @current-change="handlerCurrentChange"
                />
        </div>
        <!-- 分页区域结束 -->
        <!-- 返回顶部组件 -->
        <TridentBackTop @backTop="backTop" :isShowBackTop="isShowBackTop"></TridentBackTop>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch,  inject } from 'vue'
import { orderStatus } from '@/apis/constant'
import { reqOrderListAPI } from '@/apis/order'
import { useUserStore } from '@/stores/modules/user'
import { useRoute, useRouter } from 'vue-router'

import OrderItem from './components/OrderItem.vue'

import useScroll from '@/utils/useScroll'
import { Search } from '@element-plus/icons-vue'

// -------------- 返回顶部功能开始 --------------
const isShowBackTop = ref(false)
const {scrollTop, scrollToTop} = useScroll()
watch(scrollTop, (oldValue, newValue) => {
    isShowBackTop.value = oldValue > 800 ? true : false
})

// 返回顶部
const backTop = () => {
    scrollToTop()
}
// -------------- 返回顶部功能结束 --------------


// -------------- 定义全局属性开始 --------------
// 全局属性
const global = inject('global')

// 路由
const route = useRoute()

// 路由器
const router = useRouter()

// 用户存储
const userStore = useUserStore()

// 订单列表
const orderList = ref([])

// 订单数量
const total = ref(0)

// 订单列表请求参数
const params = reactive({
    goods_name: '',
    status: "all",
    is_delete: '0',
    page: 1,
    page_size: 10
})

// 订单状态数据
const orderStatusItems = ref([])

// 定义是否显示骨架
const isShowSkeleton = ref(false)
// -------------- 定义全局属性结束 --------------



onMounted(() => {
    getOrderList()
})


// -------------- 切换状态功能开始 --------------
const handleTabChange = async (status) => {
    params.status = status == 0 ? 'all' : status
    await getOrderList()
}
// -------------- 切换状态功能结束 --------------



// ---------------- 翻页功能开始 ----------------
const handlerCurrentChange = async (page) => {
    params.page = page
    await getOrderList()

    // 返回顶部
    scrollToTop()
}
// ---------------- 翻页功能结束 ----------------



// -------------- 获取订单数据开始 --------------
const getOrderList = async () => {
    isShowSkeleton.value = true
    const result = await reqOrderListAPI(params)
    let orders = result.data.orders != null ? result.data.orders : []
    total.value = result.data.total

    orderList.value = []

    // 组装订单状态数据
    orderStatusItems.value = []
    result.data.status_items.forEach(item => {
        let color = ''
        if (item.value == 0) {
            color = '#FF4339'
        } else if (item.value == 1) {
            color = '#27BA9B'
        } else if ([-1,-2,-3,-5].includes(item.value)) {
            color = '#BBBBBB'
        } else if ([6].includes(item.value)) {
            color = '#FF976A'
        } else if ([7].includes(item.value)) {
            color = '#7232dd'
        } else if ([8].includes(item.value)) {
            color = '#ff9240'
        } else if ([3,4,5].includes(item.value)) {
            color = '#07C160'
        }
        item.color = color
        orderStatusItems.value.push(item)
    })

    orderList.value = orders
    isShowSkeleton.value = false
}
// -------------- 获取订单数据结束 --------------



// ------------ 删除订单列表订单开始 ------------
const deleteOrderList = (oid) => {
    const index = orderList.value.findIndex((item) => item.oid == oid)
    orderList.value.splice(index, 1)
}
// ------------ 删除订单列表订单结束 ------------



// -------------- 更新订单状态开始 --------------
const updateOrderStatus = (oid, status) => {
    const order = orderList.value.find((item) => item.oid == oid)
    order.status = status
}
// ------------ 更新订单状态结束 ------------



// ---------- 更新订单明细状态开始 ----------
const updateOrderItemStatus = (oid, order_item_id, status) => {
    const order = orderList.value.find(item => item.oid == oid)
    order.orderItems.forEach(item => {
      if (item.id == order_item_id) {
        item.status = status
      }
    })
}
// ---------- 更新订单明细状态结束 ----------



// ------------ 订单搜索功能开始 ------------
const handlerSearchOrder = async () => {
    // 重置数据
    isShowSkeleton.value = true

    params.page = 1
    total.value = 0

    await getOrderList()

    isShowSkeleton.value = false
}
// ------------ 订单搜索功能结束 ------------
</script>

<style scoped lang="scss">
.order-list-container {
    // 骨架屏区域
    .orders-wrap {
        background-color: #fff;
        // 状态栏区域
        .tabs-wrap {
            padding: 10px 0;
            .tabs-skeleton-item {
                width: 100px;
                height: 35px;
                margin-right: 20px;
                &:last-child {
                    margin-right: 0;
                }
            }
        }

        // 订单区域
        .order-content-wrap {
            padding: 15px;
            .order-item-title {
                .order-skeleton-item {
                    height: 45px;
                }
            }
            .order-item-content {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px;
                border: 1px solid #F5F5F5;
                border-top: none;
                .goods-info-skeleton {
                    display: flex;
                    align-items: center;
                }
            }
        }
    }

    // 订单搜索区域
    .order-search-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;

        background-color: $main-color;
        padding: 10px;
        margin: 10px 0;

        .title {
            display: flex;
            align-items: center;

            color: #fff;
            .iconfont {
                font-size: 30px;
            }
            .txt {
                font-size: 18px;
                margin-left: 5px;
            }

        }

        .search-wrap {
            .search-btn {
                margin-left: 10px;
            }
        }
    }

    .page-wrap {
        display: flex;
        justify-content: center;
        padding-top: 20px;
    }
}
</style>